var maxImgIndex = 15, // 最大的索引值
    curTargetIndex = null, // 当前的索引
    isGameOver = false, // 游戏是否结束
    panelDom = $('.panel'),
    resultDom = $('.result'),
    resulttDom = $('.resultt'),
    dictDom = $('.dictionary');




function $(selector) {
    return document.querySelector(selector);
}

function $$(selector) {
    return document.querySelectorAll(selector);
}

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
}

function createdGriod() {
    curTargetIndex = getRandom(1, maxImgIndex)
    var str = ''
    for (var i = 0; i < 100; i++) {
        var imgIndex = null;
        if (i % 9 === 0) {
            imgIndex = curTargetIndex
        } else {
            imgIndex = getRandom(1, maxImgIndex)
        }
        str += `
        <div class='item'>
        <span class='number'>${i}</span>
        <span class='value'>
        <img src='./images/values/${imgIndex}.png' />
        </span>
        </div>
    `
    }
    dictDom.innerHTML = str
}

function move() {
    resultDom.style.opacity = 0
    resulttDom.style.opacity = 1
    resulttDom.src = `./images/values/${curTargetIndex}.png`
    isGameOver = true
}

function bindEvent() {
    // addEventListener
    // removeEventListener
    panelDom.onclick = function (e) {
        if (isGameOver) {
            if (window.confirm('转一转?')) {
                createdGriod()
                isGameOver = false
                resultDom.style.opacity = 1
                resulttDom.style.opacity = 0
                panelDom.style = ''

                panelDom.removeEventListener('transitionend',move)

            }
        } else {
            panelDom.style.transition = 'all 0.5s'
            panelDom.style.transform = 'rotate(1800deg)'
            panelDom.addEventListener('transitionend', move)
        }
    }
}

function init() {
    createdGriod()
    bindEvent()
}

init()